<template>
  <div>
    <van-nav-bar
      title="报价管理"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- @click-right="onClickRight" -->
    <van-search
      placeholder="请输入客户名称"
      @search="search"
      v-model="queryParam.Keyword"
      @clear="clear"
    />

    <div class="outerBox">
      <div
        @click="Edit(item.Id)"
        class="pricebox"
        v-for="item in data"
        :key="item.Id"
      >
        <van-swipe-cell>
          <template #right>
            <van-icon
              class="delete"
              @click.stop="btn([item.Id])"
              name="delete"
            />
          </template>
          <div>
            <div>
              <div class="QuotationNo">
                <div class="PriceCustomer">
                  <div>
                    报价单编号：
                    <div>{{ item.DocumentNo || "无" }}</div>
                  </div>

                  <div class="TotalAmount">
                    金额合计：
                    <div class="red">
                      {{
                        item.TotalAmount >= 0
                          ? item.TotalAmount.toFixed(2).replace(
                              /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                              "$&,"
                            )
                          : item.TotalAmount
                      }}
                    </div>
                  </div>
                </div>

                <div class="PriceCustomer">
                  <div class="companyName">{{ item.CustomerName }}</div>
                  <div>
                    <van-tag
                      size="large"
                      class="ApprovalStatus"
                      plain
                      type="primary"
                      >{{ item.ApprovalStatus ? "已审批" : "未审批" }}</van-tag
                    >
                  </div>
                </div>
              </div>
              <div class="address">地址：{{ item.DeliveryAddress }}</div>
            </div>
          </div>
        </van-swipe-cell>
      </div>
    </div>

    <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" />
    <Edit :parentObj="this" ref="edit" />
  </div>
</template>

<script>
import { Card } from "vant";
import { Search, Tag, NavBar, Dialog, SwipeCell, Icon, Pagination } from "vant";
import Edit from "./Edit.vue";
import PaginationCom from "../../components/PaginationCom.vue";
export default {
  components: {
    "van-tag": Tag,
    PaginationCom,
    "van-icon": Icon,
    "van-pagination": Pagination,
    "van-swipe-cell": SwipeCell,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    Edit
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      Keyword: "",
      data: [],
      queryParam: {}
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    btn(id) {
      Dialog.confirm({
        message: "确定要删除吗",
         confirmButtonColor:'#1989fa'
      })
        .then(() => {
          this.http
            .post(
              "/QuotationManagement/Quot_OfferSheetMain/DeleteDataOfAll",
              id
            )
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                this.getDataList();
              } else {
                this.$toast("删除失败");
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    clear() {
      console.log(123);
      this.queryParam = {};
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "CustomerName";
      this.queryParam.Keyword = value;
      this.getDataList();
    },

    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      this.http
        .post(
          "/QuotationManagement/Quot_OfferSheetMain/GetDataListByMySelfAndMoreCondition",
          {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "Id",
            SortType: "asc",
            Search: this.queryParam
          }
        )
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Data.Total;
        });
    }
  }
};
</script>

<style scoped>
.TotalAmount {
  margin-right: 20px;
  margin-bottom: 6px;
}
/* 审批结果 */
.ApprovalStatus {
  margin-right: 23px;
  margin-bottom: 6px;
}
.address {
  margin-left: 10px;
  padding-bottom: 10px;
}
/* .pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
} */
.delete {
  background-color: #fff;
  padding-right: 20px;
  height: 60px;
  font-size: 60px;
  color: red;
}
.QuotationNo {
  margin-top: 10px;
  margin-left: 10px;
}
.red {
  color: red;
}
.PriceCustomer {
  display: flex;
  justify-content: space-between;
}
.outerBox {
  height: calc(100vh - 150px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.companyName {
  font-size: 17px;
  /* margin-left: 10px; */
}
.pricebox {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;
  width: 95%;
  /* height: 85px; */
  /* display: flex; */
  /* flex-direction: column;
  align-items: center;
  justify-content: center; */
  /* text-align: center; */
  margin: 3px auto;
  margin-bottom: 15px;
  /* background-color: #7bbfea; */
  /* border-radius: 10px 10px 0 0; */
}
</style>
